<template>
	<view class="login">
		<view class="text">
			<view class="logo">
				<image src="/static/image/logo.png" mode=""></image>
			</view>
			<view class="logo1">
				<!-- <image src="/static/image/logo-word.png" mode="widthFix"></image> -->
			</view>
			<view class="t1">多彩生活 立即开启</view>
		</view>
		<view class="form">
			<view class="line flex mobile">
				<view class="areaCode flex">+86</view>
				<input type="text" v-model="phone" placeholder="请输入手机号" maxlength="11" @input="onInputPhone">
			</view>
			<view class="line flex code">
				<input type="text" v-model="code" placeholder="请输入验证码" maxlength="4">
				<view class="code-btn" @click="sendCode" :class="{'code-active':timer == null && phone}">
					<text v-if="timer == null">发送验证码</text>
					<text v-else>{{ time }}S</text>
				</view>
			</view>
		</view>
		<view class="btn" @click="login">登录</view>
		
		<navigator url="/pages/s/index/index" hover-class="none" open-type="switchTab" style="display: block; line-height: 80rpx; text-align: center; color: #fff; font-size: 28rpx; opacity: .9;">
			暂不登录
		</navigator>
		
		<!-- <view class="wechat">
			<view class="title flex_center">
				<i></i>
				<span>第三方登录</span>
				<i></i>
			</view>
			<view class="item flex">
				<image src="/static/wx.png" mode=""></image>
			</view>
		</view> -->
		<view class="tips flex_center">
			<view class="label" :class="{'check':isCheck}"></view>
			<text class="b">登录即代表你同意</text>
			<text @click="$common.goPage('/pages/s/single/index?id=1')">《用户协议》</text>
			<text class="b">和</text>
			<text @click="$common.goPage('/pages/s/single/index?id=2')">《隐私政策》</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCheck: true,
				time: 59,
				timer: null,
				phone: "",
				code: "",
				scode: "", 
				openid: "",
			};
		},
		onLoad(option) {
			if (option.scode){
				uni.setStorageSync('login_scode', option.scode)
			}
		},
		onShow() {
			// 分享邀请码
			let scode = uni.getStorageSync('login_scode')
			if (scode){
				this.scode=scode
			}
			
			// 手机号
			let phone = uni.getStorageSync('login_phone')
			if (phone){
				this.phone=phone
			}
			
			// 手机号
			let openid = uni.getStorageSync('openid')
			if (openid){
				this.openid=openid
			}
		},
		methods: {
			// 查看验证码码被重置
			onInputPhone(event) {
				uni.setStorageSync('login_phone', event.target.value)
			},
			async login() {
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'error'
					})
					return
				}
				if (!this.$common.checkMobile(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'error'
					})
					return
				}
				if (!this.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'error'
					})
					return
				}

				this.$http
					.post('/appNoAuth/smsLogin', {
						"code": this.code,
						"username": this.phone,
						"promoterCode": this.scode,
						"openId": this.openid,
						// "uuid": 's1s1a2s1'
					}).then(res => {
						uni.removeStorageSync('login_scode')
						
						this.$mStore.commit('login', res.token);
					})
			},
			handleSmsCodeTime(time) {
				this.timer = setInterval(() => {
					this.time--
					if (this.time < 1) {
						this.time = time
						clearInterval(this.timer)
						this.timer = null
					}
				}, 1000)
			},
			sendCode() {
				if (this.timer) {
					return
				}
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'error'
					})
					return
				}
				if (!this.$common.checkMobile(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'error'
					})
					return
				}
				this.$http
					.get('/appNoAuth/sendVerifyCode/' + this.phone)
					.then(r => {
						this.$mHelper.toast('验证码已发送.');
						this.handleSmsCodeTime(59);
					});
			}
		},
		onUnload() {
			this.$mStore.state.isLoginPage = false
		},
	}
</script>

<style lang="scss" scoped>
	.login {
		min-height: 100vh;
		background: rgba(0, 0, 0, 0.3) url(/static/login-bg.jpg) no-repeat;
		background-size: 100% auto;

		.tips {
			width: 100%;
			font-size: 26rpx;
			color: #eee;
			font-weight: 400;
			position: fixed;
			bottom: 60rpx;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;

			.label {
				display: block;
				width: 36rpx;
				height: 36rpx;
				border: 2rpx solid #ccc;
				box-sizing: border-box;
				border-radius: 50%;
				margin-right: 8rpx;
			}

			.check {
				border: none;
				background: url(/static/check.png) no-repeat;
				background-size: 100% auto;
			}

			.b {
				color: #f7b500;
			}
		}

		.wechat {
			.item {
				height: 80rpx;
				margin-top: 10rpx;

				image {
					display: block;
					width: 80rpx;
					height: 80rpx;
					margin: 14rpx auto;
				}
			}

			.title {
				color: #eee;
				font-size: 26rpx;

				span {
					padding: 0 12rpx;
				}

				i {
					width: 100rpx;
					height: 2rpx;
					background: linear-gradient(90deg, rgba(255, 254, 255, .7), rgba(254, 255, 255, 0));
					border-radius: 2rpx;

					&:first-child {
						transform: rotate(180deg);
					}
				}
			}
		}

		.btn {
			width: 610rpx;
			height: 100rpx;
			line-height: 100rpx;
			background: linear-gradient(90deg, #d7b075, #aa8050);
			border-radius: 50rpx;
			color: #fff;
			font-size: 30rpx;
			text-align: center;
			margin: 30rpx auto 60rpx;
		}

		.form {
			.code-btn {
				width: 160rpx;
				height: 68rpx;
				padding: 0 10rpx;
				line-height: 68rpx;
				text-align: center;
				border-radius: 40rpx;
				color: #fff;
				font-size: 26rpx;
				white-space: nowrap;
				background: hsla(0, 0%, 80%, .4);
			}

			.code-active {
				background: #d7b075 !important;
			}

			.uni-input-placeholder {
				position: absolute;
				top: auto !important;
				left: 0;
				color: grey;
				overflow: hidden;
				text-overflow: clip;
				white-space: pre;
				word-break: keep-all;
				pointer-events: none;
				line-height: inherit;
				color: #fff;
			}

			input {
				flex: 1;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 30rpx;
				color: #fff;
			}

			.line {
				width: 640rpx;
				height: 100rpx;
				background: hsla(0, 0%, 100%, .2);
				border-radius: 50rpx;
				margin: 0 auto 20rpx;
				box-sizing: border-box;
				padding: 0 20rpx 0 40rpx;
			}

			.mobile {
				.areaCode {
					color: #fff;
					font-size: 30rpx;
					border-right: 2rpx solid hsla(0, 0%, 100%, .3);
					margin-right: 20rpx;

					&::after {
						content: "";
						width: 20rpx;
						height: 20rpx;
						background: url(/static/down-arrow.png) no-repeat;
						background-size: 100% auto;
						margin: 0 10rpx;
					}
				}



				&::before {
					content: "";
					display: block;
					width: 22rpx;
					height: 32rpx;
					background: url(/static/shouji.png) no-repeat;
					background-size: 100% auto;
					margin-right: 12rpx;


				}
			}

			.code::before {
				content: "";
				display: block;
				width: 24rpx;
				height: 28rpx;
				background: url(/static/mima.png) no-repeat;
				background-size: 100% auto;
				margin-right: 12rpx;
			}
		}

		.text {
			width: 600rpx;
			height: 600rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.logo {
				width: 196rpx;
				height: 196rpx;

				image {
					width: 196rpx;
					height: 196rpx;
					background: none;
				}
			}

			.logo1 {
				width: 240rpx;
				height: 74rpx;
				margin: 40rpx 0 16rpx;
				image {
					width: 224rpx;
					height: 74rpx;
					background: none;
				}
			}

			.t1 {
				height: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				text-align: LEFT;
				color: #ffffff;
				line-height: 40rpx;
				letter-spacing: 1rpx;
			}
		}
	}
</style>
